
<!--
All rights Reserved, Designed By www.youyacao.com
@Description:广告管理列表
@author:成都市一颗优雅草科技有限公司
@version V4.2
注意：本前端源码遵循 MIT开源协议本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584
开源gitee地址：https://gitee.com/youyacao/songshu-video-page
 -->




<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 广告列表
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button
          type="primary"
          icon="el-icon-delete"
          class="handle-del mr10"
          @click="delAllSelection"
        >批量删除
        </el-button>
         <el-select v-model="query.type" placeholder="广告类型" class="handle-select mr10">
           <el-option key="" label="无"></el-option>
           <el-option key="1" label="启动图广告" :value="1"></el-option>
           <el-option key="2" label="视频广告" :value="2"></el-option>
           <el-option key="3" label="弹窗霸屏广告" :value="3"></el-option>
           <el-option key="4" label="首页四屏广告" :value="4"></el-option>
        </el-select>
        <el-input v-model="query.name" placeholder="广告名/推广商" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button
          style="float: right;margin-bottom:20px; "
          type="primary"
          icon="el-icon-lx-add"
          class="handle-del mr10"
          @click="addAdvert"
        >添加
        </el-button>
      </div>
      <el-row>
        <el-col :span="24">
          <el-table
            :data="tableData"
            border
            class="table"
            ref="multipleTable"
            header-cell-class-name="table-header"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="id" label="ID" width="55" align="center" sortable></el-table-column>
            <el-table-column prop="title" label="推广标题" align="center" sortable></el-table-column>
            <el-table-column prop="name" label="广告商名称" align="center" sortable></el-table-column>
            <el-table-column label="广告类型" align="center" sortable>
              <template slot-scope="scope">
                <span v-if="scope.row.type==1">启动图广告</span>
                <span v-if="scope.row.type==2">视频广告</span>
                <span v-if="scope.row.type==3">弹窗霸屏广告</span>
                <span v-if="scope.row.type==4">首页四屏广告</span>
              </template>
            </el-table-column>
            <el-table-column label="推广广告图片" align="center">
              <template slot-scope="scope">
                <el-image
                  fit="scale-down"
                  class="table-td-thumb"
                  :src="$utils.formatUrl(scope.row.img)"
                  :preview-src-list="[$utils.formatUrl(scope.row.img)]"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column label="打开方式" align="center" sortable>
              <template slot-scope="scope">
                <span v-if="scope.row.open_type==1">直接下载</span>
                <span v-if="scope.row.open_type==2">浏览器打开</span>
              </template>
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间" align="center" sortable></el-table-column>
            <el-table-column prop="end_time" label="到期时间" align="center" sortable></el-table-column>
            <el-table-column prop="ad_url" label="推广地址" align="center" sortable></el-table-column>
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <el-tag :title="scope.row.state===1?'点击禁用':'点击启用'" style="cursor:pointer"
                        @click="changeEnable(scope.$index, scope.row)"
                        :type="scope.row.state===1?'success':(scope.row.state===0?'danger':'')"
                >{{scope.row.state===1?'已启用':'已禁用'}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center" fixed="right">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.$index, scope.row)"
                >编辑
                </el-button>
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  class="red"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.page"
          :page-size="query.pageSize"
          :total="total"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="是否启用">
          <el-select v-model="form.state" placeholder="请选择">
            <el-option key="启用" label="启用" :value="1"></el-option>
            <el-option key="禁用" label="禁用" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推广标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="广告商名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="广告类型">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option key="1" label="启动图广告" :value="1"></el-option>
            <el-option key="2" label="视频广告" :value="2"></el-option>
            <el-option key="3" label="弹窗霸屏广告" :value="3"></el-option>
            <el-option key="4" label="首页四屏广告" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="广告图片">
          <el-image v-show="form.img" class="type-icon" :preview-src-list="[$utils.formatUrl(form.img)]"
                    :src="$utils.formatUrl(form.img)"></el-image>
          <el-upload
            class="upload-demo"
            :limit="1"
            :show-file-list="false"
            :data="{type:'img'}"
            :action="$store.state.frontUrl+'/api/api/upload'"
            :file-list="fileList"
            list-type="picture"
            :on-success="uploadSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <el-input type="hidden" v-model="form.img"></el-input>
        </el-form-item>
        <el-form-item v-show="form.type==2" label="视频地址">
          <el-input v-model="form.url"></el-input>
        </el-form-item>
        <el-form-item label="推广地址">
          <el-input v-model="form.ad_url"></el-input>
        </el-form-item>
        <el-form-item label="打开方式">
          <el-select v-model="form.open_type" placeholder="请选择">
            <el-option key="直接下载" label="直接下载" value="1"></el-option>
            <el-option key="浏览器打开" label="浏览器打开" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="到期时间">
          <el-date-picker
            type="date"
            placeholder="选择到期时间"
            v-model="form.end_time"
            value-format="yyyy-MM-dd"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加弹出框 -->
    <el-dialog title="添加广告" :visible.sync="addVisible" width="30%">
      <el-form ref="addForm" :rules="rules" :model="form" label-width="100px">
        <el-form-item label="是否启用" prop="state">
          <el-select v-model="form.state" placeholder="请选择">
            <el-option key="启用" label="启用" :value="1"></el-option>
            <el-option key="禁用" label="禁用" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推广标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="广告商名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="广告类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option key="1" label="启动图广告" :value="1"></el-option>
            <el-option key="2" label="视频广告" :value="2"></el-option>
            <el-option key="3" label="弹窗霸屏广告" :value="3"></el-option>
            <el-option key="4" label="首页四屏广告" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-show="form.type==2" label="推广视频" prop="type">
          <el-upload
            class="upload-demo"
            :limit="1"
            :show-file-list="false"
            :data="{type:'video'}"
            :action="$store.state.frontUrl+'/api/api/upload'"
            :file-list="fileList"
            list-type="picture"
            :on-success="uploadVideoSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <el-input type="hidden" v-model="form.url"></el-input>
          </el-upload>

        </el-form-item>
        <el-form-item label="广告图片" prop="img">
          <el-image v-show="form.img" class="type-icon" :preview-src-list="[$utils.formatUrl(form.img)]"
                    :src="$utils.formatUrl(form.img)"></el-image>
          <el-upload
            class="upload-demo"
            :limit="1"
            :show-file-list="false"
            :data="{type:'img'}"
            :action="$store.state.frontUrl+'/api/api/upload'"
            :file-list="fileList"
            list-type="picture"
            :on-success="uploadSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <el-input type="hidden" v-model="form.img"></el-input>
          </el-upload>

        </el-form-item>

        <el-form-item label="推广地址" prop="ad_url">
          <el-input v-model="form.ad_url"></el-input>
        </el-form-item>
        <el-form-item label="打开方式" prop="open_type">
          <el-select v-model="form.open_type" placeholder="请选择">
            <el-option key="直接下载" label="直接下载" value="1"></el-option>
            <el-option key="浏览器打开" label="浏览器打开" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="到期时间" prop="end_time">
          <el-date-picker
            type="date"
            placeholder="选择到期时间"
            v-model="form.end_time"
            value-format="yyyy-MM-dd"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: 'basetable',
        data () {
            return {
                fileList: [],
                query: {
                    name:'',
                    type:'',
                    page: 1,
                    pageSize: 10
                },
                tableData: [],
                multipleSelection: [],
                delList: [],
                editVisible: false,
                addVisible: false,
                total: 0,
                form: {},
                idx: -1,
                id: -1,
                rules: {
                    state: [
                        {required: true, message: '请选择是否启用', trigger: 'change'}
                    ],
                    title: [
                        {required: true, message: '请填写标题', trigger: 'blur'},
                        {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请填写广告商名称', trigger: 'blur'},
                        {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
                    ],
                    type: [
                        {required: true, message: '请选择广告类型', trigger: 'change'}
                    ],
                    img: [
                        {required: true, message: '请上传广告图片', trigger: 'change'}
                    ],
                    open_type: [
                        {required: true, message: '请选择打开方式', trigger: 'change'}
                    ],
                    ad_url: [
                        {required: true, message: '请填写推广链接', trigger: 'change'}
                    ],
                    end_time: [
                        {type: 'string', required: true, message: '请选择到期时间', trigger: 'change'}
                    ],
                }
            }
        },
        created () {
            this.getData()
        },
        methods: {
            // 获取 easy-mock 的模拟数据
            getData () {
                this.$api.advert.list(this.query).then(res => {
                    this.tableData = res.data
                    this.total = res.total || 0
                })
            },
            // 触发搜索按钮
            handleSearch () {
                this.$set(this.query, 'page', 1)
                this.getData()
            },
            // 删除操作
            handleDelete (index, row) {
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                })
                        .then(() => {

                            var arr = [row.id]
                            this.$api.advert.delete({ids: arr}).then(res => {
                                if (res.code == 1) {
                                    this.$message.error('删除失败,'+res.msg)
                                    return
                                }
                                this.getData()
                                this.$message.success('删除成功')
                            })
                        })
                        .catch(() => {
                        })
            },
            // 多选操作
            handleSelectionChange (val) {
                this.multipleSelection = val
            },
            changeEnable (index, row) {
                this.$api.advert.update({id: row.id, state: (row.state == 1 ? '0' : '1')}).then((res) => {
                    if (res.code == 1) {
                        this.$message.error(`修改失败`)
                        return
                    }
                    row.state = (row.state == 1 ? 0 : 1)
                    this.$set(this.tableData, index, row)
                    this.$set(this.tableData, this.idx, this.form)
                })

            },
            delAllSelection () {
                const length = this.multipleSelection.length
                var arr = []
                this.delList = this.delList.concat(this.multipleSelection)
                for (let i = 0; i < length; i++) {
                    arr.push(this.multipleSelection[i].id)
                }
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                })
                        .then(() => {
                            this.$api.advert.delete({ids: arr}).then(res => {
                                if (res.code == 1) {
                                    this.$message.error('删除失败,'+res.msg)
                                    return
                                }
                                this.getData()
                                this.$message.success('删除成功')
                            })
                        })
                        .catch(() => {
                        })
                this.multipleSelection = []
            },
            // 编辑操作
            handleEdit (index, row) {
                this.idx = index
                this.form = row
                this.editVisible = true
            },
            // 保存编辑
            saveEdit () {
                this.$api.advert.update(this.form).then((res) => {
                    if (res.code == 1) {
                        this.$message.error(`修改失败,`+res.msg)
                        return
                    }
                    this.editVisible = false
                    this.$message.success(`修改成功`)
                    this.$set(this.tableData, this.idx, this.form)
                })

            },
            // 分页导航
            handlePageChange (val) {
                this.$set(this.query, 'page', val)
                this.getData()
            },
            uploadSuccess (response, file, fileList) {
                if (response.code === 0) {
                    this.form.img = response.data.url
                    this.fileList = []
                } else {
                    this.$message.error('上传失败,' + response.msg)
                }

            },
            uploadVideoSuccess (response, file, fileList) {
                if (response.code === 0) {
                    this.form.url = response.data.url
                    this.form.img = response.data.img
                    this.fileList = []
                } else {
                    this.fileList = []
                    this.$message.error('上传失败,' + response.msg)
                }
            },
            addAdvert () {
                this.form = {}
                this.addVisible = true
            },
            saveAdd () {
                this.$refs['addForm'].validate((valid) => {
                    if (valid) {
                        this.$api.advert.add(this.form).then((res) => {
                            if (res.code == 1) {
                                this.$message.error(`添加失败,`+res.msg)
                                return
                            }
                            this.addVisible = false
                            this.$message.success(`添加成功`)
                            this.getData()
                        }).catch(e=>{
                          console.log(e);
                        })
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                })
            }
        }
    }
</script>

<style scoped>
  .handle-box {
    margin-bottom: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    width: 300px;
    display: inline-block;
  }

  .table {
    width: 100%;
    font-size: 14px;
  }

  .red {
    color: #ff0000;
  }

  .mr10 {
    margin-right: 10px;
  }

  .table-td-thumb {
    display: block;
    margin: auto;
    width: 80px;
  }

  .type-icon {
    display: block;
    width: 150px;
    height: 150px;
  }
</style>
